import React from 'react';
import ImageLazy from './commons/ImageLazy';

const com_img1 = require('!url?limit=8192&name=static/img/[hash:6].[ext]!../static/img/community_img1.jpg');
const com_img2 = require('!url?limit=8192&name=static/img/[hash:6].[ext]!../static/img/community_img2.jpg');
const com_img3 = require('!url?limit=8192&name=static/img/[hash:6].[ext]!../static/img/community_img3.jpg');
const com_img4 = require('!url?limit=8192&name=static/img/[hash:6].[ext]!../static/img/community_img4.jpg');
const com_img5 = require('!url?limit=8192&name=static/img/[hash:6].[ext]!../static/img/community_img5.jpg');
const arr_right = require('!url?limit=8192&name=static/img/[hash:6].[ext]!../static/img/arr_right.png');

import Swiper from 'swiper'

const index_banner_swiper1 = require('!url?limit=8192&name=static/img/[hash:6].[ext]!../static/img/index_banner_swiper1.jpg');
const community_daka3 = require('!url?limit=8192&name=static/img/[hash:6].[ext]!../static/img/community_daka3.jpg');
const community_daka2 = require('!url?limit=8192&name=static/img/[hash:6].[ext]!../static/img/community_daka2.jpg');
const community_daka1 = require('!url?limit=8192&name=static/img/[hash:6].[ext]!../static/img/community_daka1.jpg');
const community_beauty1 = require('!url?limit=8192&name=static/img/[hash:6].[ext]!../static/img/community_beauty1.jpg');
const community_beauty2 = require('!url?limit=8192&name=static/img/[hash:6].[ext]!../static/img/community_beauty2.jpg');
const community_beauty3 = require('!url?limit=8192&name=static/img/[hash:6].[ext]!../static/img/community_beauty3.jpg');
const community_mingyi3 = require('!url?limit=8192&name=static/img/[hash:6].[ext]!../static/img/community_mingyi3.jpg');
const community_mingyi2 = require('!url?limit=8192&name=static/img/[hash:6].[ext]!../static/img/community_mingyi2.jpg');
const community_mingyi1 = require('!url?limit=8192&name=static/img/[hash:6].[ext]!../static/img/community_mingyi1.jpg');

let community_swiper;
export default React.createClass({
  componentDidMount:function(){
    $('.community_swiper').each(function(index){
      $(this).find('.pagination').addClass('pagination'+index);
      let aclass='community_swiper'+index;
      community_swiper = new Swiper(this,{
        pagination: '.pagination'+index,
        paginationClickable: true,
        calculateHeight:true,
      })
    })
    $('.community .more').each(function(){
      let statu = $(this).statu = false;
      let h = $(this).parent('.item').find('.txt').height();
      $(this).click(function(){
        statu = !statu;
        let my_em =$(this).find('em');
        let this_txt = $(this).parent('.item').find('.txt');
        let this_h = this_txt.find('.wrapper').height();
        if(statu){
          my_em.html('&#9650;')
          $(this).parent('.item').find('.txt').height(this_h)
        }else{
          my_em.html('&#9660;')
          $(this).parent('.item').find('.txt').height(h)
        }

      })
    })
  },
  componentDidUpdate:function(){
    // community_swiper.reInit();
  },
  render:function(){
    return(
      <div className="community">
        <header>
          <div className="banner">
            <ImageLazy src={com_img1} style={{height:"4.79rem"}} />
          </div>
          <nav>
            <div className="wrapper">
              <a href="javascript:void(0)">
                <ImageLazy src={com_img3} />
              </a>
              <a href="javascript:void(0)">
                <ImageLazy src={com_img4} />
              </a>
              <a href="javascript:void(0)">
                <ImageLazy src={com_img5} />
              </a>
            </div>
          </nav>
        </header>
        <div className="content">
          <div className="item_wrapper">

            <div className="item">
              <h3 className="tit_sty1">最新活动<img src={arr_right} className="arr_right" /><br/>
              <small>New  Event</small></h3>
              <a href="javascript:void(0)" className="img_txt">
                <ImageLazy src={com_img2} style={{height:'4.8rem'}} />
                <h4>
                  pclady女人节<br/><small>你的存在比世界更动人</small>
                </h4>
              </a>
            </div>
            <div className="item">
              <h3 className="tit_sty1">美丽社<br/>
              <small>Beauty  Club</small></h3>
                <div className="community_swiper swiper-container">
                  <div className="swiper-wrapper">
                    <div className="swiper-slide">
                      <ImageLazy src={community_beauty1} />
                    </div>
                    <div className="swiper-slide">
                      <ImageLazy src={community_beauty2} />
                    </div>
                    <div className="swiper-slide">
                      <ImageLazy src={community_beauty3} />
                    </div>
                  </div>
                  <div className="pagination"></div>
                </div>
              <div className="txt box">
                <div className="wrapper">
                <p>
                她们在这里相识，她们在这里诉说，她们在这里蜕变与成长，她们集美貌与智慧、情商与财商于一身，她们是美人谷的财富俪人，是一群以温柔的姿态统领千军万马的女王。
                </p>
                </div>
              </div>
              <a href="javascript:void(0)" className="more">
                MORE <em>&#9660;</em>
              </a>
            </div>

            <div className="item">
              <h3 className="tit_sty1">名医社<br/>
              <small>Famous Doctor Club</small></h3>
                <div className="community_swiper swiper-container">
                  <div className="swiper-wrapper">
                    <div className="swiper-slide">
                      <ImageLazy src={community_mingyi1} />
                    </div>
                    <div className="swiper-slide">
                      <ImageLazy src={community_mingyi2} />
                    </div>
                    <div className="swiper-slide">
                      <ImageLazy src={community_mingyi3} />
                    </div>
                  </div>
                  <div className="pagination"></div>
                </div>
              <div className="txt box">
                <div className="wrapper">
                <p>在这里，他们酣畅淋漓的交流；</p>
                <p>在这里，他们缔造个性之美，绽放个人魅力；</p>
                <p>在这里，他们用热爱生活的心，用魔幻的艺术之手，用投入的力量，创造一个又一个美丽的神话……</p>
                <p>这里是名医云集的美人谷名医社。</p>
                </div>
              </div>
              <a href="javascript:void(0)" className="more">
                MORE <em>&#9660;</em>
              </a>
            </div>

            <div className="item">
              <h3 className="tit_sty1">大咖社<br/>
              <small>Famous Doctor Club</small></h3>
                <div className="community_swiper swiper-container">
                  <div className="swiper-wrapper">
                    <div className="swiper-slide">
                      <ImageLazy src={community_daka1} />
                    </div>
                    <div className="swiper-slide">
                      <ImageLazy src={community_daka2} />
                    </div>
                    <div className="swiper-slide">
                      <ImageLazy src={community_daka3} />
                    </div>
                  </div>
                  <div className="pagination"></div>
                </div>
              <div className="txt box">
              <div className="wrapper">
                <p>他们热爱美的事业，他们用心享受生活，他们乐于进取，敢于拼搏，在一片繁花似锦里挥斥方遒……他们是传说中的美业大咖，
                行业中的佼佼者，他们结缘美人谷，共聚美人谷。你们，想认识他们吗？</p>
                <p>大咖等你来。</p>
                </div>
              </div>
              <a href="javascript:void(0)" className="more">
                MORE <em>&#9660;</em>
              </a>
            </div>
          </div>
        </div>
      </div>
    )
  }
})
